<template>
  <!--              新增发货人弹框 只需要国家 州 市 公司名-->
  <el-dialog title="新增发货方"
             :visible.sync="visible" center width="30%"
             :cusId="cusId"
             :close-on-click-modal="false" :before-close="handleClose">
    <el-form :model="shipper" :rules="shipperRules" ref="shipper">
      <el-form-item label="公司名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="shipper.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="contact" :label-width="formLabelWidth" >
        <el-input v-model="shipper.contact" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="tel" :label-width="formLabelWidth" >
        <el-input v-model="shipper.tel" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
        <el-input v-model="shipper.email" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="国家" prop="country" :label-width="formLabelWidth">
        <el-select v-model="shipper.country" placeholder="请选择" filterable clearable @change="initStateList">
          <el-option v-for="(item,index) in countrylist" :key="index" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="州/省" prop="state" :label-width="formLabelWidth">
        <el-select v-model="shipper.state" placeholder="请选择" filterable clearable @change="initCityList">
          <el-option v-for="item in statelist" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
        <el-select v-model="shipper.city" placeholder="请选择" filterable clearable>
          <el-option v-for="item in citylist" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="address" :label-width="formLabelWidth">
        <el-input v-model="shipper.address" type="textarea" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="saveShipper" :disabled="shipperBtnDisable">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { httpAction} from "../../http/request";
  import {emailPattern, mobilePattern} from "../../utils/pattern";
  export default {
    name : 'shipperDialog',
    comments : {
      ShipperDialog
    },
    props : {
      visible : {
        type : Boolean
      },
      cusId: {
        type : String
      }
    },
    data(){
      return {
        url: {
          add : '/customer/shipper/add' ,

        },
        shipperRules:{
          name:[
            { required : true, message:'请输入名称',trigger:'blur'},
            { max : 50, message:'长度不能超过50',trigger:'change'},
          ],
          contact:[
            { required : true, message:'请输入联系人',trigger:'blur'},
            { max : 50, message:'联系人长度不能超过50',trigger:'change'},
          ],
          tel:[
            { required : true, message:'请输入电话',trigger:'blur'},
            { pattern : mobilePattern, message:'手机号格式有误',trigger:'change'},
          ],
          email:[
            { pattern : emailPattern, message:'邮箱格式有误',trigger:'change'},
          ],
          country:[
            { required : true, message:'请选择国家',trigger:'change'},
          ],
          state:[
            {required:true,message:'请选择省/州',trigger:'change'},
          ],
          city:[
            {required:true,message:'请选择城市',trigger:'change'},
          ],
          address:[
            {required:true,message:'请输入地址',trigger:'blur'},
            {max:250,message:'长度不能超过250',trigger:'change'},
          ],
        },
        formLabelWidth:'100px',
        shipperBtnDisable:false,
        shipper:{},
      }
    },
    methods:{
      saveShipper(){
        this.shipperBtnDisable = true;
        let url = this.url.add;
        let method = "post";
        this.shipper.cusId = this.cusId;
        this.$refs['shipper'].validate((valid)=>{
          if (valid){
            httpAction(url,method,this.shipper)
              .then(res=>{
                if (res.success){
                  this.$message.success(res.message);
                  this.shipperVisible=false;
                  //重新获取发货人集合
                }else{
                  this.shipperBtnDisable = false;
                  this.$message.warning(res.message);
                }

              }).catch(err=>{
              this.$message.error(err.message);
              this.shipperBtnDisable = false;
            })
          }else {
            this.shipperBtnDisable = false;
          }
        })
      },
      handleClose() {
        this.$emit('update:visible', false)
      }
    }
  }
</script>
